<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    年:<input type="text" class="year">
    月:<input type="text" class="month">
    日:<input type="text" class="day">
    <button class="btn">判断</button>
    <span class="result"></span>
</body>
<script>
    // 注意: 表单取值用 value => 获取和设置表单控件的value值


    //
    // 一. 输入判断   => 将判断的结果输出到span
    // 1. 先输入年月日
    // 2. 点击取值 判断范围
    //    a. 年份 1000-9999的整数
    //    b. 月份 1-12的整数
    //    c. 日期
    //       大月: 1 3 5 7 8 10 12 => 31
    //       小月: 4 6 9 11 => 30
    //       2月: 平年=>28 闰年=>29


    // 二. 在第一题的基础上(格式全都正确)  => 判断输入的日期是该年的第多少天? => span

    // 第n个月如何算 => 前n-1个月之和 + 当前月几号
    // 2022-7-28 => ( 31 + 28 + 31 + 30 + 31 + 30 ) + 28


    // var yearInp = document.getElementsByClassName("year")[0];
    // var btn = document.getElementsByClassName("btn")[0];

    // btn.onclick = function () {
    //     var year = yearInp.value;
    //     console.log(year);
    // }


</script>
<script>
    // 断点 => 让代码执行到指定位置停止 => 后续可以手动控制执行 => 常用于调试代码

    // 断点的使用步骤
    // 1. 哪里不会点哪里
    // 2. 触发断点所在位置 => 代码  (在控制台 => source中查看执行步骤)
    //    a. 如果代码在页面加载时执行 => 刷新页面
    //    b. 如果代码在事件中 => 触发事件
    //    c. 如果代码在函数中 => 调用函数
    
    // 3. 让代码逐行执行
    //    F9   下一步
    //    F10  下一步 (如果存在函数调用 => 跳过函数执行步骤,直接得到结果)
    //    F11  下一步 (如果存在函数调用 => 进入函数,按步骤执行函数中的代码)
    //    F8   恢复脚本执行 => 整个脚本继续向后执行

    // 4. 移除断点 debugger

</script>
<script>
    // debugger;
    var yearInp = document.getElementsByClassName("year")[0];
    var monthInp = document.getElementsByClassName("month")[0];
    var dayInp = document.getElementsByClassName("day")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var resultSpan = document.getElementsByClassName("result")[0];


    btn.onclick = function () {
        // debugger;
        var year = yearInp.value;
        var month = monthInp.value;
        var day = dayInp.value;
        // console.log(1, year, month, day);
        // console.log(typeof year, typeof month, typeof day);

        // if 常用于做条件判断
        if (year >= 1000 && year <= 9999 && year % 1 == 0) {
            console.log("year ok!");

            if (month >= 1 && month <= 12 && month % 1 == 0) {
                console.log("month ok!");

                // if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {

                // } else if (month == 4 || month == 6 || month == 9 || month == 11) {

                // } else { // 2

                // }
                
                var maxDay = null; // 根据传入的月份 得到该月有多少天
                switch (month*1) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        maxDay = 31;

                        break;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        maxDay = 30;
                        break;

                    case 2:
                        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                            maxDay = 29;
                        } else {
                            maxDay = 28;
                        }

                        break;

                    default:
                        resultSpan.innerText = "出现意料之外的情况";
                        resultSpan.style.fontSize = "12px";
                        resultSpan.style.color = "red";
                        return;
                        break;
                }

                // 判断日期是否在对应范围之间
                if (day >= 1 && day <= maxDay && day % 1 == 0) {
                    console.log("month ok!");
                } else {
                    resultSpan.innerText = `${month}月日期需要在1-${maxDay}之间`;
                    resultSpan.style.fontSize = "12px";
                    resultSpan.style.color = "red";
                }


            } else {
                resultSpan.innerText = "月份需要在1-12之间";
                resultSpan.style.fontSize = "12px";
                resultSpan.style.color = "red";
            }

        } else {
            resultSpan.innerText = "请输入1000-9999之间的年份";
            resultSpan.style.fontSize = "12px";
            resultSpan.style.color = "red";
        }

    }



</script>

</html>